<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
		<script src="../jquery/jquery-3.5.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			function zeroFill(time) {
				if (time < 10) {
					time = "0" + time;
				}
				return time;
			}

			function getDateTime() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				return year + "-" + zeroFill(month) + "-" + zeroFill(day) + " " + zeroFill(hour) + ":" + zeroFill(minute) + ":" + zeroFill(second);
			}

			function getHeadSculpture() {
				return 'images/tou0' + Math.floor(Math.random() * 4 + 1) + '.jpg';
			}

			function getUserName() {
				var words = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
					'u', 'v', 'w', 'x', 'y', 'z'
				];
				var word = words[Math.floor(Math.random() * words.length)];
				var userName = word + word + word + word + word;
				return userName;
			}

			$(function() {
				$("#in").click(function() {
					$('#post').css('display', $('#post').css('display') == 'block' ? 'none' : 'block');
				});
				$("#out").click(function() {
					if ($("#content").val() == "") {
						alert("发布内容不能为空");
						return;
					}
					$('#post').css('display', 'none');
					var section = $("#section").val();
					$('ul#postList').append(
						"<li>" +
						"<div>" +
						'<img src=' + getHeadSculpture() + '>' +
						"</div>" +
						"<h1>" + getUserName() +
						"</h1>" +
						"<p>" +
						"<span>板块：" + section +
						"</span>" +
						"<span>发布时间：" + getDateTime() +
						"<span>" +
						"</p>" +
						"</li>");
				});
			});
		</script>
	</head>
	<body>
		<div class="bbs">
			<header id="in">
				<span>
					我要发帖
				</span>
			</header>
			<section>
				<ul id="postList">
					<li>
						<div>
							<img src="images/tou02.jpg">
						</div>
						<h1>
							ggggg
						</h1>
						<p>
							<span>
								版块：新手报到
							</span>
							<span>
								发表时间：2019-11-18 17:28
							</span>
						</p>
					</li>
					<li>
						<div>
							<img src="images/tou01.jpg">
						</div>
						<h1>
							ddddd
						</h1>
						<p>
							<span>
								版块：新课来了
							</span>
							<span>
								发表时间：2019-11-18 17:27
							</span>
						</p>
					</li>
				</ul>
			</section>

			<div class="post" id="post">
				<input id="title" class="title" placeholder="请输入标题（1-50个字符）" minlength="1" maxlength="50">
				所属版块：
				<select id="section" required>
					<option>
						请选择版块
					</option>
					<option>
						电子书籍
					</option>
					<option>
						新课来了
					</option>
					<option>
						新手报到
					</option>
					<option>
						职业规划
					</option>
				</select>
				<textarea class="content" id="content"></textarea>
				<input id="out" class="btn" value="发布">
			</div>
		</div>
	</body>
</html>